<template>
  <div id="line"></div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  data() {
    return {

    }
  },
  mounted() {
    var scene = new THREE.Scene()
    var geometry = new THREE.BoxGeometry(100, 100, 100) // 创建一个几何体模型
    // 设置材质
    var material = new THREE.LineBasicMaterial({
      color: '#00a4ff'
    })
    var curve = new THREE.CatmullRomCurve3([
      new THREE.Vector3(10, 40, 60),
      new THREE.Vector3(-10, -40, -60),
      new THREE.Vector3(40, 80, 90)
    ])
    var points = curve.getPoints(3)// 分段器

    // curve.points.push(100)
    // console.log(curve, '/??')
    geometry.setFromPoints(points)
    var line = new THREE.Line(geometry, material)
    scene.add(line)
    //
    var shape = new THREE.Shape()// 圆形对象
    shape.arc(0, 0, 100, 0, 2 * Math.PI)
    var path1 = new THREE.Path()
    path1.arc(0, 0, 40, 0, 2 * Math.PI)
    var paht2 = new THREE.Path()
    paht2.arc(80, 0, 10, 0, 2 * Math.PI)
    shape.holes.push(path1, paht2)
    var geometry1 = new THREE.ShapeGeometry(shape, 30)
    var material1 = new THREE.MeshPhongMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide
    })
    // var line1 = new THREE.Line(geometry1, material1)
    var line1 = new THREE.Mesh(geometry1, material1)
    scene.add(line1)
    //
    // 设置光源
    var point = new THREE.PointLight(0xffffff)
    point.position.set(400, 200, 300)
    scene.add(point)
    // 设置环境光
    var ambient = new THREE.AmbientLight(0x44444)
    scene.add(ambient)

    // 设置相机
    const width = 900
    const height = 800
    var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
    // 设置相机位置
    camera.position.set(200, 200, 200)
    camera.lookAt(0, 0, 0)
    // 创建一个渲染器
    var renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height)// 设置渲染器大小
    renderer.setClearColor('#ffffff', 1)// 设置背景颜色
    renderer.render(scene, camera)// 添加模型和相机
    document.getElementById('line').appendChild(renderer.domElement)// 把渲染结果插入到dom元素中
    // 添加控制器缩放旋转
    const controls = new OrbitControls(camera, renderer.domElement)
    // 监听缩放事件从新渲染结果
    controls.addEventListener('change', function() {
      renderer.render(scene, camera)
    })
  }
}
</script>
